<template>
  <div id="app">
    <el-button type="info" icon="el-icon-caret-left" @click="$router.go(-1)" size="mini">返回</el-button>
    <el-form ref="WageForm" size="small" :model="WageInfo" :rules="wage">
      <el-row>
        <el-col :span="10">
          <el-form-item label="部门" prop="DepartmentName">
            <el-input v-model="WageInfo.DepartmentName" placeholder="请输入你的部门"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="TitleName">
            <el-input v-model="WageInfo.TitleName" placeholder="请输入你的职位"></el-input>
          </el-form-item>
          <el-form-item label="开始日期" prop="StartDate">
            <br>
            <el-date-picker style="width:100%" v-model="WageInfo.StartDate" value-format="yyyy/MM/dd" align="right"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4"><br></el-col>
        <el-col :span="10">
          <el-form-item label="姓名" prop="FullName">
            <el-input v-model="WageInfo.FullName" placeholder="请输入你的姓名"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="Description">
            <el-input v-model="WageInfo.Description" placeholder="请输入你的描述"></el-input>
          </el-form-item>
          <el-form-item label="结束日期" prop="EndDate">
            <br>
            <el-date-picker style="width:100%" value-format="yyyy/MM/dd" v-model="WageInfo.EndDate" align="right"
              type="date" placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="10">
          <el-form-item label="基本工资" prop="BaseWage">
            <el-input v-model.number="WageInfo.BaseWage" placeholder="请输入你的基本工资"></el-input>
          </el-form-item>
          <el-form-item label="加班工资" prop="OTWage">
            <el-input v-model.number="WageInfo.OTWage" placeholder="请输入你的加班工资"></el-input>
          </el-form-item>
          <el-form-item label="绩效工资" prop="PerformanceWage">
            <el-input v-model.number="WageInfo.PerformanceWage" placeholder="请输入你的绩效工资"></el-input>
          </el-form-item>
          <el-form-item label="提成" prop="Commission">
            <el-input v-model.number="WageInfo.Commission" placeholder="请输入你的提成"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"><br></el-col>
        <el-col :span="10">
          <el-form-item label="工作天数" prop="WorkDays">
            <el-input v-model.number="WageInfo.WorkDays" placeholder="请输入你的工作天数"></el-input>
          </el-form-item>
          <el-form-item label="加班天数" prop="OTDays">
            <el-input v-model.number="WageInfo.OTDays" placeholder="请输入你的加班天数"></el-input>
          </el-form-item>
          <el-form-item label="补发工资" prop="ReissueWage">
            <el-input v-model.number="WageInfo.ReissueWage" placeholder="请输入你的补发工资"></el-input>
          </el-form-item>
          <el-form-item label="奖金" prop="Bonus">
            <el-input v-model.number="WageInfo.Bonus" placeholder="请输入你的奖金
            "></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="10">
          <el-form-item label="社保" prop="SocialSecurity">
            <el-input v-model.number="WageInfo.SocialSecurity" placeholder="请输入你的社保"></el-input>
          </el-form-item>
          <el-form-item label="个税" prop="IncomeTax">
            <el-input v-model.number="WageInfo.IncomeTax" placeholder="请输入你的个税"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"><br></el-col>
        <el-col :span="10">
          <el-form-item label="公积金" prop="AccumulationFund">
            <el-input v-model.number="WageInfo.AccumulationFund" placeholder="请输入你的公积金"></el-input>
          </el-form-item>
          <el-form-item label="扣款" prop="Deductions">
            <el-input v-model.number="WageInfo.Deductions" value="" placeholder="请输入你的扣款"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="10">
          <el-form-item label="应发工资" prop="TotalWage">
            <el-input placeholder="基本工资" v-model.number="WageInfo.TotalWage" :disabled="true" class="input-with-select">
              <el-button slot="append" @click="jisuan(WageInfo)" icon="el-icon-mobile-phone">计算</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14"></el-col>
      </el-row>
      <hr>
      <div style="padding:10px 0px 0px;">
        <el-button type="primary" size="small" @click="submit('WageForm')">保存</el-button>
        <el-button type="success" size="small" @click="$router.go(-1)">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      WageInfo: {
        TotalWage: 0,
        fk_User: null,
        DepartmentName: null,
        TitleName: null,
        StartDate: null,
        FullName: null,
        Description: null,
        EndDate: null,
        BaseWage: null,
        OTWage: null,
        PerformanceWage: null,
        Commission: null,
        WorkDays: null,
        OTDays: null,
        ReissueWage: null,
        Bonus: null,
        SocialSecurity: null,
        IncomeTax: null,
        AccumulationFund: null,
        Deductions: null,
        TotalWage: null
      },
      Type: 'Add',
      wage: {
        DepartmentName: [
          { required: true, message: '请输入你的部门', trigger: 'blur' }
        ],
        TitleName: [
          { required: true, message: '请输入你的职位', trigger: 'blur' }
        ],
        StartDate: [
          { required: true, message: '请输入你的开始日期', trigger: 'blur' }
        ],
        FullName: [
          { required: true, message: '请输入你的姓名', trigger: 'blur' }
        ],
        Description: [
          { required: true, message: '请输入你的描述', trigger: 'blur' }
        ],
        EndDate: [
          { required: true, message: '请输入你的结束日期', trigger: 'blur' }
        ],
        BaseWage: [
          { required: true, message: '请输入你的基本工资', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        OTWage: [
          { required: true, message: '请输入你的加班工资', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        PerformanceWage: [
          { required: true, message: '请输入你的绩效工资', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        Commission: [
          { required: true, message: '请输入你的提成', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        WorkDays: [
          { required: true, message: '请输入你的工作天数', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        OTDays: [
          { required: true, message: '请输入你的加班天数', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        ReissueWage: [
          { required: true, message: '请输入你的补发工资', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        Bonus: [
          { required: true, message: '请输入你的奖金', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        SocialSecurity: [
          { required: true, message: '请输入你的社保', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        IncomeTax: [
          { required: true, message: '请输入你的个税', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        AccumulationFund: [
          { required: true, message: '请输入你的公积金', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        Deductions: [
          { required: true, message: '请输入你的扣款', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ],
        TotalWage: [
          { required: true, message: '请输入你的应发工资', trigger: 'blur' },
          { type: 'integer', message: '请输入数字类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit (WageInfo) {
      //表单验证
      this.$refs[WageInfo].validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.$axios({
            url: "/HrApi/wagemange/UpdateWageList",
            method: "POST",
            data: this.$Qs.stringify({
              WageInfo: JSON.stringify(this.WageInfo),
              Type: this.Type,
              pk_User: this.$store.state.UserInfo.pk_User
            })
          }).then(res => {
            if (!res.data.code) {
              this.ListDt = res.data.data;
              // //一般信息
              // this.$message.info("dd")
              // //成功信息
              // this.$message.success("dd")
              // //失败信息
              // this.$message.error("dd")
              this.$message.success(res.data.msg)
              if (this.Type === "Add") {
                this.$refs['WageForm'].resetFields();
              }
            } else {
              this.$message.error(res.data.msg);
            }
          })
        }
      })
    },
    jisuan (j) {
      if (Object.keys(j).length <= 1) {
        this.$message.error("数据不完整")
        return
      }
      j.TotalWage = parseInt(j.BaseWage) + parseInt(j.OTWage) + parseInt(j.PerformanceWage) +
        parseInt(j.Commission) + parseInt(j.ReissueWage) + parseInt(j.Bonus) - parseInt(j.SocialSecurity)
        - parseInt(j.IncomeTax) - parseInt(j.AccumulationFund) - parseInt(j.Deductions)
    }
  },
  mounted () {
    console.log(this.$route)
    if (Object.keys(this.$route.query).length) {
      //编辑
      this.Type = "Edit";
      this.$axios({
        url: '/HrApi/wagemange/GetRoleName',
        method: 'GET',
        params: {
          NameID: this.$route.query["pk_Wage"],
          Type: "SelID",
          NowTime: this.$route.query["NowTime"]
        }
      }).then(res => {
        if (!res.data.code) {
          this.WageInfo = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>
